<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-button type="success" style="margin-bottom: 10px;" @click="showAddModel">请假</el-button>
                    </el-col>
                    <el-col :span="8">
                        <div class="m-4">
                            <!-- <div class="block" style="float: right; margin-right: 10px;">
                                <el-date-picker v-model="data" type="month" placeholder="请选择月份"
                                    @change="selectAll(1)" />
                                <el-button type="danger" :icon="Delete" circle size="small" style="margin-left: 5px"
                                    @click="clearData" />
                            </div> -->
                        </div>
                    </el-col>
                </el-row>
                <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="请假记录" name="first" default>
                        <el-table :data="holidayslist" border style="width: 100%; margin-top: 30px;">
                            <el-table-column prop="medicalStaff.mno" label="员工号" width="150px" />
                            <el-table-column prop="medicalStaff.mname" label="员工姓名" width="100px" />
                            <el-table-column prop="picdir" label="头像" width="110px">
                                <template #default="scope">
                                    <el-avatar :size="80"
                                        :src="SERVER_ADDR + '/upload/' + scope.row.medicalStaff.picdir"></el-avatar>
                                </template>
                            </el-table-column>
                            <el-table-column prop="htype" label="请假类型" width="100px" />
                            <el-table-column prop="description" label="请假理由" width="200px" />
                            <el-table-column prop="startDate" label="开始时间" width="200px" />
                            <el-table-column prop="endDate" label="结束时间" width="200px" />
                            <el-table-column prop="medicalStaff.mphone" label="联系方式" width="130px" />
                            <el-table-column prop="hstate" label="请假状态" width="100px">
                                <template #default="scope">
                                    <span v-if="scope.row.hstate == 1">              
                                        <el-tag type="warning">审核中</el-tag>
                                    </span>
                                    <span v-else-if="scope.row.hstate == 2">
                                        <el-tag type="danger">驳回</el-tag>
                                    </span>
                                    <span v-else-if="scope.row.hstate == 3">
                                        <el-tag type="success">通过</el-tag>
                                    </span>                                  
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-tab-pane>
                </el-tabs>

            </el-card>
        </el-col>
    </el-row>

    <!-- 请假对话框开始 -->
    <el-dialog v-model="addDialoadShowHolidays" title="新增请假" width="500">
        <el-form>
            <el-form-item label="请假备注"  label-width="20%">
                <el-input  :rows="5" type="textarea" v-model="EmpHolidays.description" autocomplete="off" style="width: 240px" />
            </el-form-item>
            <el-form-item label="请假类型" label-width="20%">
                <el-radio-group v-model="EmpHolidays.htype">
                    <el-radio value="事假" border>事假</el-radio>
                    <el-radio value="病假" border>病假</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="开始日期" label-width="20%">
                <el-date-picker v-model="EmpHolidays.startDate" type="datetime" placeholder="请选择一个时间"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 240px" />
            </el-form-item>
            <el-form-item label="结束日期" label-width="20%">
                <el-date-picker v-model="EmpHolidays.endDate" type="datetime" placeholder="请选择一个时间"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 240px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialoadShowHolidays = false">取消</el-button>
                <el-button type="primary" @click="Empinsert">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 请假对话框结束 -->
</template>
<script setup>
import holidaysApi from '@/api/admin/holidaysApi.js';
import { ref, resolveDirective } from 'vue';
import { DataAnalysis, Minus, Delete, View } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
const activeName = ref('first')
const addDialoadShowHolidays = ref(false);
//定于护工的请假记录
const holidayslist = ref([]);
//定义查询护工请假记录
const seelectAllEmp = () => {
    //
    holidaysApi.seelectAllEmp()
        .then(resp => {
            holidayslist.value = resp.data
        })
}
//定于请假的模板
const EmpHolidays = ref({
    startDate: "",
    endDate: "",
    htype: "",
    description: "",
    hstate: 3,
});
//定义显示请假对话框
const showAddModel = () => {
    addDialoadShowHolidays.value = true
}
//定义请假方法
const Empinsert = ()=> {
    holidaysApi.empInsert(EmpHolidays.value)
        .then(resp => {
            if(resp.code == 10000){
                ElMessage.success(resp.msg)
                addDialoadShowHolidays.value = false
                EmpHolidays.value = {
                    startDate: "",
                    endDate: "",
                    htype: "",
                    description: "",
                    hstate: 3,
                };
                seelectAllEmp()
            }else{
                ElMessage.error(resp.msg)
            }
        })
}
seelectAllEmp()
</script>
<style scoped></style>